<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <link rel="icon" href="img/logo.png" type="image/x-icon" />

    <!-- eel(python) -->
    <script type="text/javascript" src="js/eel.js"></script>
    <!-- Import Vue 3 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    <!-- vue 路由 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.1.6/vue-router.global.js"></script>
    <!-- axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- Import component library -->
    <script src="https://unpkg.com/element-plus"></script>
    <!-- echarts -->
    <!-- <script src="js/echarts.js"></script> -->
    <script src="js/echart.min.js"></script>

    <!-- icon -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
        integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- Import style -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />

    <link rel="stylesheet" href="css/index.css">

</head>

<body>

    <div id="app">
        <!-- 整个屏幕container -->
        <el-container class="index_container">
            <!-- mian-aside 左边 -->
            <el-aside width="200px" class="index_aside">
                <!-- aside 的顶部（icon 和 title） -->
                <div class="index_aside_top">
                    <img src="img/logo.png" alt="logo">
                    <span>TiTiuper</span>
                </div>

            <div class="index_aside_menu">
                <!-- index 首页 -->
                <div class="index_aside_menu_item" @click="jumpToHomeHtml">
                    <img src="/img/menu/index.png" alt="首页">
                    <span>首页</span>
                </div>
                <!-- 股票管理 -->
                <div class="index_aside_menu_item" @click="jumpToStockHtml">
                    <img src="/img/menu/list_gray.png" alt="股票管理">
                    <span>股票管理</span>
                </div>
                <!-- 策略管理 -->
                <div class="index_aside_menu_item" @click="jumpToStrategyHtml">
                    <img src="/img/menu/task_gray.png" alt="策略管理">
                    <span>策略管理</span>
                </div>
                <!-- 单步执行 -->
                <div class="index_aside_menu_item index_aside_menu_item_selected" @click="jumpToSetpHtml">
                    <img src="/img/menu/run_gray.png" alt="单步执行">
                    <span>单步执行</span>
                </div>
                <!-- 多股票执行 -->
                <div class="index_aside_menu_item" @click="jumpToDebugHtml">
                    <img src="/img/menu/column_gray.png" alt="多股票执行">
                    <span>多股票执行</span>
                </div>
                <!-- 数据调整 -->
                <div class="index_aside_menu_item" @click="jumpToStrategyHtml">
                    <img src="/img/menu/data_gray.png" alt="数据调整">
                    <span>数据调整</span>
                </div>
                <!-- 运营管理 -->
                <div class="index_aside_menu_item" @click="jumpTooperationHtml">
                    <img src="/img/menu/list_gray.png" alt="运营管理">
                    <span>运营管理</span>
                </div>
                <!-- 设置 -->
                <!-- <div class="index_aside_menu_item">
                                    <img src="/img/menu/setting_gray.png" alt="设置">
                                    <span>Setting</span>
                                </div> -->
            </div>

            </el-aside>

            <el-main>
                <el-card class="main_card">

                    <el-header>
                        <el-container>
                            <i class="fa fa-linkedin-square margin10"></i>
                            <el-breadcrumb separator="/">
                                <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
                                <el-breadcrumb-item><a href="">promotion management</a></el-breadcrumb-item>
                                <el-breadcrumb-item>promotion list</el-breadcrumb-item>
                                <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
                            </el-breadcrumb>
                        </el-container>
                        <el-divider />
                    </el-header>

                    <el-main style="overflow-y: scroll; width: 300px; height: 500px;">
                       This is main
                    </el-main>

                </el-card>
            </el-main>

        </el-container>
    </div>


    <script>


        const App = {
            el: '#app',
            data() {
                return {
                    "test": "testdata"
                }
            },

            methods: {
                //测试跳转test.html
                jumpToHomeHtml(){
                    window.location.href = "/home.html";
                },
                jumpToSetpHtml() {
                    window.location.href = "/step.html";
                },
                jumpToDebugHtml() {
                    window.location.href = "/debug.html";
                },
                jumpToStrategyHtml() {
                    window.location.href = "/strategy.html";
                },
                jumpTooperationHtml() {
                    window.location.href = "/operation.html";
                },
            },

        }

        const app = Vue.createApp(App);
        app.use(ElementPlus);
        app.mount("#app");
    </script>

</body>

</html>